window.addEventListener('load', function () {
    var right = document.querySelector('.nav-right');
    var left = document.querySelector('.nav-left')
    var focus = document.querySelector('.focus');
    var im = document.querySelector('.im');
    // 显示箭头
    focus.addEventListener('mouseenter', function () {
        right.style.display = 'block';
        left.style.display = 'block';
        clearInterval(timer);
        timer = null;
    })
    focus.addEventListener('mouseleave', function () {
        right.style.display = 'none';
        left.style.display = 'none';
        timer = setInterval(function () {
            right.click();
        }, 2000);
    })
    // 动态生成小圆点
    var num = 0;
    var k = 0;
    var crice = document.querySelector('.crice');
    for (var i = 0; i < im.children.length; i++) {
        var li = document.createElement('li');
        li.setAttribute('index', i);
        crice.appendChild(li);
        crice.children[0].className = 'current';
        crice.children[i].addEventListener('click', function () {
            for (var i = 0; i < im.children.length - 1; i++) {
                crice.children[i].className = '';
            }
            this.className = 'current';
            var index = this.getAttribute('index');
            num = index;
            k = index;
            animate(im, -index * focus.offsetWidth);
        })
    }
    // 点击右箭头滚动图片
    var first = im.children[0].cloneNode(true);
    im.appendChild(first);
    var flag = true;
    right.addEventListener('click', function () {
        if (flag) {
            flag = false;
            if (num == im.children.length - 1) {
                im.style.left = 0;
                num = 0;
            }
            num++;
            k++;
            if (k == im.children.length - 1) {
                k = 0;
            }
            animate(im, -focus.offsetWidth * num, function () {
                flag = true;
            });
            for (var i = 0; i < im.children.length - 1; i++) {
                crice.children[i].className = '';
            }
            crice.children[k].className = 'current';
        }

    })
    //点击左侧箭头滚动图片
    left.addEventListener('click', function () {
        if (flag) {
            flag = false;
            if (num == 0) {
                im.style.left = -num * focus.offsetWidth + 'px';
                num = im.children.length - 1;
            }
            num--;
            animate(im, -focus.offsetWidth * num, function () {
                flag = true;
            });
            k--;
            if (k < 0) {
                k = 3;
            }
            for (var i = 0; i < im.children.length - 1; i++) {
                crice.children[i].className = '';
            }
            crice.children[k].className = 'current';
        }

    })
    // 自动播放功能
    var timer = setInterval(function () {
        right.click();
    }, 2000);
})